<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app" @click="fn4">
			<button v-on:click="counter += 1">增</button>
			<button v-on:click="fn1">方法</button>
			<button v-on:click="fn2(2,$event)">参数</button>
			<button @click.stop="fn3()">事件修饰符</button>
			<a href="https://www.atstudy.com" @click.prevent.stop="fn5">学掌门(阻止默认行为)</a>
			<button @click.once="fn6()">触发一次</button>
			<h3>{{counter}}</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					counter: 0
				},
				methods: {
					fn1() {
						this.counter++;
					},
					fn2(n, e) {
						console.log(e);
						this.counter += n;
					},
					fn3() {
						console.log("fn3");
					},
					fn4() {
						console.log("fn4");
					},
					fn5() {
						console.log("fn5");
					},
					fn6() {
						console.log("fn6");
					}
				}
			})
		</script>
	</body>
</html>
